<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="success" @click="selectServer">服务器({{ serverSelect }})</el-button>
      在线日期 <el-date-picker v-model="searchForm.onlineDate" class="filter-item" type="date" style="width: 160px;" placeholder="在线日期"></el-date-picker>
      对比日期 <el-date-picker v-model="searchForm.contrastDate" class="filter-item" type="date" style="width: 160px;" placeholder="对比日期"></el-date-picker>
      <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <div ref="echartsContainer" style="width: 100%; height: 700px;"></div>
    <el-dialog :visible.sync="dialogVisible" title="选择服务器" :close-on-click-modal="false">
      <el-checkbox v-model="allServerChecked" @change="checkAllServer">显示全服</el-checkbox>
      <div class="server-box">
        <ul class="menu-sub">
          <li
            v-for="(sgit,index) in groupList"
            :key="index"
          >
            <el-checkbox
              v-model="sgit.flag"
              :indeterminate="itemIndeterminate(sgit)"
              @change="(val) => handleCheckAll(val, sgit)"
            >{{ sgit.sgname }}</el-checkbox>
            <el-checkbox-group
              v-model="selectedData"
              style="padding-left: 30px;"
              @change="handleChanges(sgit)"
            >
              <el-checkbox
                v-for="sgits in sgit.children"
                :key="sgits.sid"
                :label="sgits.sid"
              >{{ sgits.name }}</el-checkbox>
            </el-checkbox-group>
          </li>
        </ul>
      </div>
      <div class="tr">
        <el-button type="primary" @click="confirmSubmit()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getOnlineList } from '@/api/statis'
import { getServerListGroup } from '@/api/ops'

export default {
  name: 'OnlineList',
  data() {
    return {
      list: [],
      onlineData: [],
      contrastData: [],
      chartxAxisData: [],
      listLoading: false,
      serverSelect: '全部',
      dialogVisible: false,
      allServerChecked: false,
      groupList: [],
      selectedData: [],
      searchForm: {
        servers: [],
        onlineDate: new Date(),
        contrastDate: new Date(Date.now() - 86400000)
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleFilter(query) {
      this.getList()
    },
    async getList() {
      this.listLoading = true
      const res = await getOnlineList(this.searchForm)
      this.listLoading = false
      /* const onlineData = []
      const contrastData = []
      for (let i = 0; i < res.data.online.length; i++) {
        onlineData.push(this.searchForm.onlineDate)
        contrastData.push(this.searchForm.contrastData)
      }
      this.onlineData = onlineData
      this.contrastData = contrastData */
      this.onlineData = res.data.online
      this.contrastData = res.data.contrast
      this.chartxAxisData = res.data.hours.map(item => item + '时')
      this.hanleChart()
    },

    selectServer() {
      this.dialogVisible = true
      this.isVisible = true
      this.serverListGroup(false)
    },
    async serverListGroup(val) {
      getServerListGroup({ all: val }).then(res => {
        this.groupList = res.data
      })
    },
    confirmSubmit() {
      this.searchForm.servers = this.selectedData
      this.dialogVisible = false
    },

    hanleChart() {
      var myChart = echarts.init(this.$refs.echartsContainer)
      const onlineName = this.$options.filters.dateFormat(this.searchForm.onlineDate)
      const contrastName = this.$options.filters.dateFormat(this.searchForm.contrastDate)
      myChart.setOption(
        {
          // ECharts 配置项
          title: {
            text: '在线统计'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [onlineName, contrastName]
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.chartxAxisData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: onlineName,
              type: 'line',
              smooth: true,
              data: this.onlineData
            },
            {
              name: contrastName,
              type: 'line',
              smooth: true,
              data: this.contrastData
            }
          ]
        }
      )
    },
    // 全选
    handleCheckAll(val, item) {
      // 过滤掉没有选中的数据，item.child中不包含v时返回-1
      const next = item.children.map(item => item.sid)
      const filterArr = this.selectedData.filter(
        (v) => next.indexOf(v) === -1
      )
      this.selectedData = val ? filterArr.concat(next) : filterArr
    },
    itemIndeterminate(item) {
      const infoLists = item.children.map(ite => ite.sid)
      return (
        infoLists.some((v) => this.selectedData.indexOf(v) > -1) &&
        !infoLists.every((v) => this.selectedData.indexOf(v) > -1)
      )
    },
    // 勾选变化方法
    handleChanges(val) {
      const infoLists = val.children.map(ite => ite.sid)
      infoLists.every((v) => {
        if (this.selectedData.indexOf(v) > -1) {
          val.flag = true
        } else {
          val.flag = false
        }
      })
    },
    checkAllServer() {
      this.serverListGroup(this.allServerChecked)
    }
  }
}
</script>
